<template>
  <div id="Goods-component">
    <div class="item" v-for="(item, index) in goods.list" :key="index">
      <a :href="item.link">
        <img :src="item.showLarge.img" alt="" />
        <div class="bottom">
          <p>
            {{ item.title }}
          </p>
          <span class="price">{{ item.orgPrice }}</span>
          <span><van-icon name="star" />{{ item.cfav }}</span>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "Goods",
  props: {
    goods: {
      type: [Object, Array],
    },
  },
}
</script>

<style lang="less" scoped>
#Goods-component {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 260px;
  padding: 5px;
  .item {
    flex: 1;
    text-align: center;
    margin-top: 10px;
    img {
      width: 150px;
      height: 225px;
      vertical-align: middle;
    }
    .bottom {
      width: 150px;
      height: 30px;
      p {
        white-space: nowrap;
        overflow: hidden;
        font-size: 12px;
      }
      span {
        font-size: 12px;
      }
      .price {
        color: #ff8198;
        margin-right: 5px;
      }
    }
  }
}
</style>
